<template>
    <div class="dashboard-container">
        <!-- 顶部标题栏 -->
        <Header></Header>
      
        <!-- 主要内容区 -->
        <div class="content">
            <!-- 左侧面板 -->
            <div class="left-panel">
                <dv-border-box6>
                    <!-- <div class="block">区域1</div> -->
                </dv-border-box6>
                
                <div class="block">区域2</div>
                <div class="block">区域3</div>
                <div class="block">区域4</div>
            </div>
 
            <!-- 中间面板 -->
            <div class="center-panel">
                <div class="block">上部区域（1/3）</div>
                <div class="block">下部区域（2/3）</div>
            </div>
 
            <!-- 右侧面板 -->
            <div class="right-panel">
                <div class="block">区域A</div>
                <div class="block">区域B</div>
                <div class="block">区域C</div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import DataPanel from '../components/DataPanel.vue';
import WebGIS from '../components/WebGIS.vue';
import ChartContainer from '../components/ChartContainer.vue';
import Header from '../components/Header.vue';
</script>
  
<style lang="scss" scoped>
.dashboard-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: url('@/assets/images/grid-bg.png') repeat, linear-gradient(135deg, #0a192f 0%, #000b1a 100%);
    background-size: 40px;
    padding: 10px;
    box-sizing: border-box;
}
.content {
    display: flex;
    gap: 10px;  // 区块间距
    padding: 5px;
    // min-height: 100vh;
    background: #0f1320;
    height: calc(100% - 60px);
}

/* 左侧区域（4等分网格） */
.left-panel {
    display: grid;
    /* grid-template-rows: repeat(2, 1fr);  // 2行等高
    grid-template-columns: repeat(2, 1fr);  // 2列等宽 */
    grid-template-rows: repeat(4, 1fr);  // 4行等高
    grid-template-columns: 1fr;             // 1列等宽
    gap: 10px;
    width: 400px;
    flex-shrink: 0;
}
 
/* 中间区域（上下布局） */
.center-panel {
    flex: 1;
    display: grid;
    grid-template-rows: 1fr 2fr;
    gap: 10px;
}
 
/* 右侧区域（3等分网格） */
.right-panel {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 10px;
    width: 350px;
    flex-shrink: 0;
}
 
/* 公共区块样式 */
.block {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 16px;
    color: #fff;
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
 
/* 响应式处理 */
@media (max-width: 1440px) {
    .content {
        flex-wrap: wrap;
    }

    .left-panel,
    .right-panel {
        width: 100%;
        max-width: none;
        grid-template-columns: repeat(4, 1fr);
    }

    .center-panel {
        width: 100%;
        order: 3;
    }
}
 
@media (max-width: 768px) {
    .left-panel,
    .right-panel {
        grid-template-columns: repeat(2, 1fr);
    }

    .center-panel {
        grid-template-rows: 1fr 1fr;
    }
}
  
/* .content {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr;
    gap: 20px;
    height: calc(100% - 60px);
}
  
.left-panel, .right-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
  
.center-panel {
    height: 100%;
}
  
@media (max-width: 1600px) {
    .content {
        grid-template-columns: 1fr 1.5fr 1fr;
    }
} */
</style>